<script setup lang="ts">
import { computed, ref, getCurrentInstance } from 'vue';
import { onShow, onPageScroll } from '@dcloudio/uni-app';
import { getRentInfo, getShopList, getDeviceList } from '@/app/api/rent';
import {img, redirect} from '@/utils/common';
import shopItem from './components/shopItem';
import skuItem from './components/skuItem';
import MescrollEmpty from "@/components/mescroll/mescroll-empty/mescroll-empty.vue";
const detail = ref();
const shopList = ref([]);
const deviceList = ref([]);
onShow(() => {
	getDetail();
	getShop();
	getDevice();
});
const getDetail = async () => {
	let res: any = await getRentInfo();
	if (res.data) {
		detail.value = res.data;
	}
};
const getShop = async () => {
	let res: any = await getShopList();
	if (res.data) {
		shopList.value = res.data;
	}
};
const getDevice = async () => {
	let res: any = await getDeviceList();
	if (res.data) {
		deviceList.value = res.data;
	}
};
const toBill = () => {
	if (detail.value.show === 'to_pay_rent' && detail.value.rent_paid === 0) {
		redirect({ url: '/app/pages/rent/bill' });
	}
};
</script>
<template>
	<view :style="themeColor()" class="bg-[rgb(247,247,247)] pb-[20rpx] min-h-[100vh]">
		<c-header url="/addon/shop/pages/member/index" mode="switchTab" />
		<view class="h-[626rpx] bg-gradient-to-b from-[#D0AA72] to-[#9A7A4B] mb-[15rpx] rounded-b-[20rpx] pt-[180rpx] box-border px-[28rpx] text-[#fff] relative z-1" v-if="detail">
			<view class="">
				<view class="flex items-center text-[16px] mb-[10rpx]">
					<view class="mr-[20rpx]"><image :src="img('/upload/dyj/static/emptyWallet.png')" class="w-[48rpx] h-[48rpx]" mode="aspectFill" /></view>
					{{ detail.month_text }}份租金 (元)
				</view>
			</view>
			<view class="text-[72rpx] mt-[90rpx] flex items-center justify-center" @click="toBill()" :class="detail.show === 'to_pay_rent' && detail.rent_paid === 0 ? ['cursor-pointer'] : ''">
				{{ detail.rent_paid === 1 ? '本月租金已缴纳' : detail.show === 'total_rent' ? detail.rent : detail.show === 'to_pay_rent' ? detail.to_pay_rent : 0 }}
				<text v-if="detail.show === 'to_pay_rent' && detail.rent_paid === 0" class="text-[42rpx] ml-[8rpx]">></text>
			</view>
			<view class="text-[28rpx] mt-[32rpx] text-center" v-if="detail.show === 'total_rent' && detail.rent_paid === 0">本月租金</view>
			<view class="text-[28rpx] mt-[32rpx] text-center" v-else-if="detail.show === 'to_pay_rent' && detail.rent_paid === 0">本月需缴纳租金</view>
			<view class="text-[28rpx] mt-[60rpx] text-right">
				累计租赁
				<text class="text-[36rpx]">{{ detail.device_count || 0 }}</text>
				台设备 租金日每月
				<text class="text-[36rpx]">{{ detail.pay_rent_date || 25 }}</text>
				日
			</view>
			<view class="absolute z-2 bottom-[0rpx] right-[20rpx]"><image :src="img('/upload/dyj/static/moneyPocket.png')" class="w-[425rpx] h-[500rpx]" /></view>
		</view>
		<view class="flex justify-between items-center px-[24rpx]">
			<view
				class="w-[47%] h-[144rpx] bg-[#9A7A4B] p-[20rpx] rounded-[20rpx] cursor-pointer box-border"
				@click="redirect({ url: '/app/pages/rent/createShop', param: { isSelectMap: 1 } })"
			>
				<view class="h-full border-[1px] border-solid border-[#fff] rounded-[20rpx] flex items-center pl-[20rpx] box-border">
					<view class="w-[70rpx] h-[70rpx] mr-[20rpx]"><u-image :src="img('/upload/dyj/static/leftIcon.png')" width="70rpx" height="70rpx" mode="aspectFill" /></view>
					<view>
						<view class="text-[28rpx] text-[#fff] mb-[10rpx]">新增门店</view>
						<view class="text-[20rpx] text-[#fff]">添加新增门店信息</view>
					</view>
				</view>
			</view>
			<view class="w-[47%] h-[144rpx] bg-[#9A7A4B] p-[20rpx] rounded-[20rpx] cursor-pointer box-border" @click="redirect({ url: '/app/pages/rent/flow' })">
				<view class="h-full border-[1px] border-solid border-[#fff] rounded-[20rpx] flex items-center pl-[20rpx] box-border">
					<view class="w-[70rpx] h-[70rpx] mr-[20rpx]"><u-image :src="img('/upload/dyj/static/rightIcon.png')" width="70rpx" height="70rpx" mode="aspectFill" /></view>
					<view>
						<view class="text-[28rpx] text-[#fff] mb-[10rpx]">费用明细</view>
						<view class="text-[20rpx] text-[#fff]">查看费用明细清单</view>
					</view>
				</view>
			</view>
		</view>
		<view class="px-[24rpx]">
			<template v-for="(item, index) in shopList" :key="`shop${index}`">
				<shop-item :item="item" />
			</template>
		</view>
		<view class="px-[24rpx]">
			<template v-for="(item, index) in deviceList" :key="`sku${index}`">
				<sku-item :item="item" />
			</template>
		</view>
    <mescroll-empty
        :option="{'icon': img('addon/shop_fenxiao/sale/empty.png'), 'tip': '暂无门店'}"
        v-if="!shopList.length"></mescroll-empty>
	</view>
</template>

<style lang="scss" scoped></style>
<style lang="scss"></style>
